/*
 * @Author: yangrongxin
 * @Date: 2021-08-09 09:24:20
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-07 11:29:51
 */
import { useMemo, useState } from 'react';
import { View, Text, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui';
import { TEST_STATUS } from '@/pages/My/compoents/MyAssessment/dataDictionary';
import dayjs from 'dayjs';
import { getRemind } from '../../service';
import styles from './index.module.less';

// 定义当前是否能够进行催测评的枚举值
export enum REMIND_STATUS {
  ENABLE = 1, // 有效
  DISABLED = 2, // 失效
}

// 当前的报告状态
export enum REPORT_STATUS {
  WAITING = 0, // 等待报告
  FINISH = 1, // 报告完成
}

const TeamItem = (props) => {
  const {
    name,
    successNums,
    totalNum,
    status,
    evaluationId,
    remindStatus,
    teamNums = 0,
    reportNums = 0,
    reportStatus = REPORT_STATUS.WAITING,
    endTime,
  } = props;

  const [canNotice, setCanNotice] = useState<boolean>(remindStatus === REMIND_STATUS.ENABLE); // 设置当前能不能点击催测评按钮

  // 按钮文本描述
  const btnDesc = useMemo(() => {
    return '查看报告';
  }, []);

  // 跳转小程序团队报告
  const showTeamTestReport = () => {
    Taro.navigateTo({
      url: `/pages/TeamTestReport/index?evaluationId=${evaluationId}`,
    });
  };

  /* 根据type字段获取对应的信息 */
  const getInfoWithType = () => {
    let titleEle: any = null; // 控制头部的元素
    let btnEle: any = null; // 按钮组的设置
    if (status === TEST_STATUS.TESTING || status === TEST_STATUS.WAITTEST) {
      titleEle = (
        <View className={styles.progressing}>
          <Text>测评中</Text>
        </View>
      );
      btnEle = (
        <View className={styles.btnGroup}>
          <View className={styles.endTime}>
            <Text>截止时间：{dayjs(endTime).format('YYYY-MM-DD')}</Text>
          </View>
          {canNotice && (
            <Button
              className={styles.progressingBtn}
              onClick={() =>
                getRemind({ evaluationId }).then((res: any) => {
                  if (res) {
                    setCanNotice(false);
                    Taro.showToast({
                      title: '提醒成功！',
                      icon: 'none',
                    });
                  }
                })
              }
            >
              <AtIcon value="bell" size="16" />
              <Text>催测评</Text>
            </Button>
          )}
          <Button
            className={styles.progressingBtn}
            onClick={() => {
              Taro.navigateTo({
                url: `/pages/Team/components/EvaluationTable/index?isCondition=true&evaluationId=${evaluationId}`,
              });
            }}
          >
            <Text>测评情况表</Text>
          </Button>
        </View>
      );
    }
    if (status === TEST_STATUS.FINISH && reportStatus === REPORT_STATUS.WAITING) {
      titleEle = (
        <View className={styles.waitReport}>
          <Text>等待报告</Text>
        </View>
      );
      btnEle = (
        <Button className={styles.disabledBtn}>
          <AtIcon prefixClass="icon" value="Post-fill" size="18" />
          <Text>{btnDesc}</Text>
        </Button>
      );
    }
    if (status === TEST_STATUS.FINISH && reportStatus === REPORT_STATUS.FINISH) {
      titleEle = (
        <View className={styles.testSuccess}>
          <Text>报告完成</Text>
        </View>
      );
      btnEle = (
        <Button className={styles.viewBtn} onClick={showTeamTestReport}>
          <AtIcon prefixClass="icon" value="Post-fill" size="18" />
          <Text>{btnDesc}</Text>
        </Button>
      );
    }
    // 当前团队没有成员的时候 不展示对应的状态信息和按钮信息
    if (teamNums === 0) {
      titleEle = null;
      btnEle = null;
    }
    return {
      titleEle,
      btnEle,
    };
  };

  const { titleEle, btnEle } = getInfoWithType();

  return (
    <View className={styles.container}>
      {/* 展示当前的测评状态 */}
      <View className={styles.header}>
        {/* 测评状态标签 */}
        <View>
          {titleEle}
          {/* <Text>{name}</Text> */}
          <Text className="ellipsisText">{name}</Text>
        </View>
        <View>
          <Text>已测评</Text>
          <Text className={status === TEST_STATUS.FINISH ? styles.waiting : ''}>{successNums}</Text>
          <Text>/{totalNum}</Text>
        </View>
      </View>
      {/* 展示查看报告按钮 */}
      {btnEle}
    </View>
  );
};

export default TeamItem;
